<template>
  <div class="info">
    <!-- 动画小球 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="show" ref="ball"></div>
    </transition>

    <!-- 轮播图 -->
    <div class="rotation">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <cube-slide ref="slide" :data="rotation">
              <cube-slide-item v-for="(item, index) in rotation" :key="index">
                <img :src="item.image">
              </cube-slide-item>
            </cube-slide>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作 -->
    <div class="mui-card handle">
      <div class="mui-card-header">
        <h4 v-html="title" style="line-height: 20px;"></h4>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          市场价：<span v-text="remove" class="remove"></span>销售价：<span v-text="price" class="price"></span>
          <br/>
          购买数量：
          <NInput :min="1" :max="surplus" ref="input"/>

          <div class="button">
            <cube-button :inline="true" class="blue">立即购买</cube-button>
            <cube-button :inline="true" class="red" @click="add" ref="ballS">加入购物车</cube-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情 -->
    <div class="mui-card intro">
      <div class="mui-card-header"><h4>商品参数</h4></div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：<span v-text="number"></span></p>
          <p>库存情况：<span v-text="surplus"></span>件</p>
          <p>上架时间：<span>{{ create_t | time('Y-M-D H:m:S') }}</span></p>
        </div>
      </div>
      <div class="mui-card-footer">
        <cube-button :outline="true" class="blue" @click="click('intro')">图文介绍</cube-button>
        <cube-button :outline="true" class="red" @click="click('comment')">商品评论</cube-button>
      </div>
    </div>
  </div>
</template>

<script>
import NInput from '@/components/ninput.vue'
import clone from '@/tool/clone'

export default {
  props: ['ballE'],
  data () {
    return {
      info: null,
      // 小球
      show: false
    }
  },
  computed: {
    // 轮播图
    rotation () {
      return this.info ? this.info.img.map(value => { return { image: value } }) : []
    },
    // 给价格添加 ￥ 符号
    remove () {
      return this.info ? '￥' + this.info.remove : ''
    },
    price () {
      return this.info ? '￥' + this.info.price : ''
    },
    // 做空值取空字符串
    title () {
      return this.info ? this.info.title : ''
    },
    surplus () {
      return this.info ? this.info.surplus : 1
    },
    create_t () {
      return this.info ? this.info.create : ''
    },
    number () {
      return this.info ? this.info.number : ''
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    // 获取数据
    getInfo () {
      this.axios.get('/goods/info', { params: { url: this.$route.query.url, title: this.$route.query.title, id: this.$route.query.id } })
        .then(res => {
          this.info = res.data
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            const toast = this.$createToast({
              type: 'txt',
              txt: '请求超时'
            })
            toast.show()
          } else {
            console.log(err)
          }
        })
    },
    click (v) {
      switch (v) {
        case 'intro':
          this.$router.push({ name: 'goodsintro', params: { id: 666 } })
          break
        case 'comment':
          this.$router.push({ name: 'goodscom', params: { id: 666 } })
          break
      }
    },
    // 加入购物车
    add () {
      // 小球动画
      this.show = true
      // 购物车数据更新
      let info = clone(this.info)
      info.count = this.$refs.input.get()      
      this.$store.commit('cartAdd', info)
      this.$refs.input.set(1)
    },
    // 动画钩子
    beforeEnter (el) {
      let left = this.$refs.ballS.$el.getBoundingClientRect().left
      let top = this.$refs.ballS.$el.getBoundingClientRect().top
      el.style.left = left + 32 + 'px'
      el.style.top = top - 36 + 'px'
    },
    enter (el, done) {
      // el.offsetTop

      let left = this.ballE[0].getBoundingClientRect().left
      let top = this.ballE[0].getBoundingClientRect().top
      el.style.left = left + 7 + 'px'
      el.style.top = top - 6 + 'px'

      el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)'
      done()
    },
    afterEnter (el) {
      this.show = false
    }
  },
  components: {
    NInput
  },
  mounted () {
    // console.log(this.ballE[0])
    // let t = window.setTimeout(() => {
    //   let left = this.ballE[0].getBoundingClientRect().left
    //   let top = this.ballE[0].getBoundingClientRect().top
    //   this.$refs.ball.style.left = left + 7 + 'px'
    //   this.$refs.ball.style.top = top - 6 + 'px'
    //   this.$refs.ball.style.transform = 'translate(0, 0)'
    //   window.clearTimeout(t)
    // }, 1000)
  }
}
</script>

<style lang="stylus" scoped>
.info
  background-color #ccc
  margin-top -10px
  padding-top 10px
  // 轮播图
  .rotation
    img
      height 200px
      margin 0 auto
      display block
      vertical-align middle
    >>> .cube-slide-dots
      display none
  // 操作
  .handle
    .mui-card-content
      line-height 30px
      color #999
      font-size 13px
      // 价格
      .remove
        text-decoration-line line-through
        margin-right 10px
      .price
        color #d81a1a
        font-size 16px
        font-weight 700
      // 按钮
      .button
        margin 10px
        .blue
          background-color #2b93de
          margin-right 10px
        .red
          background-color #dd524d
  // 详情
  .intro
    .mui-card-footer
      display block
      button
        margin-bottom 5px
        &.blue
          color #2b93de
          &::after
            border 2px solid #2b93de
          &:enabled:active
            background-color #2b93de29
        &.red
          color #dd524d
          &::after
            border 2px solid #dd524d
          &:enabled:active
            background-color #dd524d29
  // 动画小球
  .ball
    background-color #ea3029
    width 15px
    height 15px
    border-radius 50%
    position fixed
    z-index 1002
</style>
